<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="../../libs/jquery.min.js"></script>
<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../js/common.js"></script>
<body>
<audio src="alarm.mp3" controls="controls" preload id="music" hidden>
</audio>
<audio src="permited.mp3" controls="controls" preload id="permit_mp3" hidden>
</audio>
<audio src="limited.mp3" controls="controls" preload id="limited_mp3" hidden>
</audio>
<script>
var audioTimes = 0

function play_permit(){
	var audio_permit = document.getElementById('permit_mp3');
	if(audio_permit!==null){
		audio_permit.play();// 播放
	}
}

function play_limited(){
	var audio_limited = document.getElementById('limited_mp3');
	if(audio_limited!==null){
		audio_limited.play();// 播放
	}
}

function play_alarm(){
	var audio = document.getElementById('music');
	if(audio!==null){
		audio.play();// 播放
	}
}

function control(){
	var audio = document.getElementById('music');
	if(audio!==null){
		if(audio.paused){
			audio.play();// 播放
		}else{
			audio.pause();// 暂停
		}
	}
}

</script>
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <script type="text/javascript" xlink:href="svg.js"></script>
  <script type="text/javascript">

  <style>
	  #div {
		width:350px;
		height:350px;
		background-color:white;
		position:fixed;
		bottom:-150px;
		right:0px;
		transition:all 1.5s ease;
	}

	#close {
		width:20px;
		height:20px;
		background-color:white;
		text-align:center;
		line-height:20px;
		float:right;
		margin:10px;
		cursor:pointer;
	}

  </style>
  		
 <![CDATA[
  	// define document width and height
    
  	
	var width = 50 * 10 * 18, height =  window.screen.height-20
	
	// create SVG document and set its size
	
	var topX = 10;

	var topY_chenzhan = 50;
	var topYN = 100;
	var topY_line_sec = 180;

	var topY = 350; 
    
    var trailHight = 250
    var spaceHight = 50
    var lineWidth = 50

    var draw = SVG('drawing').size(width+ 4* topX, height)
	draw.viewbox(0,0,width + 4* topX,height)

	// draw background
	var background = draw.rect(width+ 4* topX, height).fill('#000000')

    
	// draw line  street L 上面 R 下面  
	function draw_people(nums,street='L',name,alarm)
	{	
    	var group  = draw.group().attr("id",name);
	    vpj = topY 
	    vpi = nums 
	 
	    x = (vpi-1) * lineWidth + 15
	    if(street == 'L')
	    {
	    	y = topYN - 30
	    }
	    else
	    {
	    	y = topYN + 220
	    }	 
	    group.text(name).font({size:15}).fill('#fff').move(x-15, y-25)
	    if(alarm==1){
	    	group.path("M452.266667 171.042133a196.130133 196.130133 0 0 0-46.199467-14.455466 165.376 165.376 0 0 0-27.306667-2.986667h-8.3968a165.376 165.376 0 0 0-27.648 2.986667c-19.950933 3.6864-38.929067 10.154667-56.388266 19.524266-55.842133 29.986133-86.357333 84.002133-86.357334 156.398934v8.072533c-0.0512 6.8608 0.290133 15.837867 1.024 25.6 1.348267 18.090667 3.822933 35.2768 7.4752 51.2 7.202133 31.2832 18.500267 55.7056 35.328 73.216 1.8432 1.911467 4.7104 5.5296 7.304534 9.472 3.140267 4.795733 4.898133 8.738133 5.2224 10.461867 0 2.9184 0.187733 2.338133-1.416534 3.822933-5.102933 4.7104-16.6912 11.502933-39.7312 22.8352-119.637333 58.845867-159.709867 92.16-160.1536 149.504l-3.720533 53.213867a41.6768 41.6768 0 0 0 38.570667 44.526933c3.242667 0.221867 49.732267 0.392533 114.961066 0.512-0.2048-19.114667 0.546133-36.096 2.082134-51.2a25724.586667 25724.586667 0 0 1-103.8336-0.273067l3.072-44.049066 0.068266-1.792c0-29.696 29.303467-54.186667 131.549867-104.4992 55.0912-27.101867 69.751467-40.669867 69.751467-73.045334 0-1.962667-0.136533-3.925333-0.392534-5.888-1.348267-10.4448-6.058667-21.2992-13.243733-32.238933a122.487467 122.487467 0 0 0-13.175467-16.8448c-9.506133-9.8816-17.0496-26.197333-22.357333-49.237333a292.386133 292.386133 0 0 1-6.314667-43.52 288.443733 288.443733 0 0 1-0.887466-21.640534v-8.192c0-54.033067 20.599467-90.487467 59.392-111.3088a141.892267 141.892267 0 0 1 41.472-14.2848A116.462933 116.462933 0 0 1 370.568533 204.8h7.953067c3.976533 0.034133 10.632533 0.733867 18.2272 2.133333 6.0928 1.1264 12.032 2.594133 17.800533 4.386134a165.597867 165.597867 0 0 1 37.717334-40.277334zM806.4 599.0912c-43.588267-21.504-47.428267-24.900267-47.496533-32.768 0.341333-2.3552 2.474667-7.253333 6.314666-13.1072 2.986667-4.573867 6.2976-8.772267 8.448-11.008 18.346667-19.131733 30.72-45.943467 38.621867-80.4352a381.44 381.44 0 0 0 8.277333-56.7808c0.802133-10.8032 1.1776-20.753067 1.143467-28.398933v-4.437334-4.027733c0-80.3328-33.4336-139.6736-94.685867-172.6464a211.694933 211.694933 0 0 0-61.969066-21.504A181.009067 181.009067 0 0 0 635.118933 170.666667h-9.335466c-8.3456 0.068267-18.8416 1.1776-30.3104 3.293866a211.677867 211.677867 0 0 0-61.969067 21.504c-61.269333 32.989867-94.685867 92.330667-94.685867 172.151467v9.028267c-0.034133 7.594667 0.341333 17.544533 1.143467 28.3648 1.501867 20.0704 4.232533 39.133867 8.277333 56.746666 7.901867 34.5088 20.2752 61.320533 38.6048 80.4352 2.167467 2.2528 5.461333 6.4512 8.465067 11.025067 3.84 5.853867 5.973333 10.752 6.314667 13.090133-0.068267 7.8848-3.925333 11.264-47.496534 32.785067-132.317867 65.28-176.349867 102.007467-176.7936 164.488533l-4.164266 59.562667a43.537067 43.537067 0 0 0 40.260266 46.557867c12.612267 0.887467 627.1488 1.024 637.781334-0.170667a43.554133 43.554133 0 0 0 38.4-48.042667l-6.4512-59.562666c-1.194667-61.474133-45.602133-98.116267-176.7424-162.833067z m151.1936 165.4272l25.565867-1.3824-0.1024-1.962667-25.565867 1.3824-18.107733 1.962667h18.210133z m-25.565867 0.785067l5.802667 53.486933c-67.157333 0.597333-545.621333 0.512-613.034667-0.0512l3.669334-52.445867c0.068267-36.6592 33.314133-64.546133 148.309333-121.2928 60.416-29.815467 76.049067-44.322133 76.049067-78.933333 0-2.048-0.136533-4.096-0.4096-6.178133-1.416533-11.127467-6.485333-22.869333-14.267734-34.730667a133.888 133.888 0 0 0-14.336-18.397867c-11.025067-11.485867-19.643733-30.208-25.668266-56.439466a330.769067 330.769067 0 0 1-7.1168-49.1008 326.3488 326.3488 0 0 1-1.006934-24.456534v-9.147733c0-61.474133 23.552-103.253333 67.754667-127.061333a160.648533 160.648533 0 0 1 47.035733-16.247467c8.6528-1.604267 16.213333-2.389333 21.1968-2.440533h8.891734c4.608 0.034133 12.202667 0.853333 20.821333 2.440533 16.861867 3.1232 32.699733 8.533333 47.035733 16.247467 44.202667 23.808 67.754667 65.5872 67.754667 127.061333v9.233067c0.034133 6.229333-0.290133 14.848-1.006933 24.354133-1.314133 17.595733-3.669333 34.133333-7.1168 49.117867-6.024533 26.231467-14.6432 44.9536-25.668267 56.439466a133.870933 133.870933 0 0 0-14.336 18.397867c-7.765333 11.861333-12.8512 23.6032-14.267733 34.730667a48.5888 48.5888 0 0 0-0.4096 6.178133c0 34.6112 15.633067 49.117867 76.049066 78.933333 115.012267 56.763733 148.241067 84.650667 148.241067 119.517867h7.389867l-7.338667 0.785067z").fill('#FFFF00').attr({ x: 20, y: 60 }).transform({scale:0.030}).transform({'x':x,'y':y})
	    }
	    else
	    {
	    	group.path("M452.266667 171.042133a196.130133 196.130133 0 0 0-46.199467-14.455466 165.376 165.376 0 0 0-27.306667-2.986667h-8.3968a165.376 165.376 0 0 0-27.648 2.986667c-19.950933 3.6864-38.929067 10.154667-56.388266 19.524266-55.842133 29.986133-86.357333 84.002133-86.357334 156.398934v8.072533c-0.0512 6.8608 0.290133 15.837867 1.024 25.6 1.348267 18.090667 3.822933 35.2768 7.4752 51.2 7.202133 31.2832 18.500267 55.7056 35.328 73.216 1.8432 1.911467 4.7104 5.5296 7.304534 9.472 3.140267 4.795733 4.898133 8.738133 5.2224 10.461867 0 2.9184 0.187733 2.338133-1.416534 3.822933-5.102933 4.7104-16.6912 11.502933-39.7312 22.8352-119.637333 58.845867-159.709867 92.16-160.1536 149.504l-3.720533 53.213867a41.6768 41.6768 0 0 0 38.570667 44.526933c3.242667 0.221867 49.732267 0.392533 114.961066 0.512-0.2048-19.114667 0.546133-36.096 2.082134-51.2a25724.586667 25724.586667 0 0 1-103.8336-0.273067l3.072-44.049066 0.068266-1.792c0-29.696 29.303467-54.186667 131.549867-104.4992 55.0912-27.101867 69.751467-40.669867 69.751467-73.045334 0-1.962667-0.136533-3.925333-0.392534-5.888-1.348267-10.4448-6.058667-21.2992-13.243733-32.238933a122.487467 122.487467 0 0 0-13.175467-16.8448c-9.506133-9.8816-17.0496-26.197333-22.357333-49.237333a292.386133 292.386133 0 0 1-6.314667-43.52 288.443733 288.443733 0 0 1-0.887466-21.640534v-8.192c0-54.033067 20.599467-90.487467 59.392-111.3088a141.892267 141.892267 0 0 1 41.472-14.2848A116.462933 116.462933 0 0 1 370.568533 204.8h7.953067c3.976533 0.034133 10.632533 0.733867 18.2272 2.133333 6.0928 1.1264 12.032 2.594133 17.800533 4.386134a165.597867 165.597867 0 0 1 37.717334-40.277334zM806.4 599.0912c-43.588267-21.504-47.428267-24.900267-47.496533-32.768 0.341333-2.3552 2.474667-7.253333 6.314666-13.1072 2.986667-4.573867 6.2976-8.772267 8.448-11.008 18.346667-19.131733 30.72-45.943467 38.621867-80.4352a381.44 381.44 0 0 0 8.277333-56.7808c0.802133-10.8032 1.1776-20.753067 1.143467-28.398933v-4.437334-4.027733c0-80.3328-33.4336-139.6736-94.685867-172.6464a211.694933 211.694933 0 0 0-61.969066-21.504A181.009067 181.009067 0 0 0 635.118933 170.666667h-9.335466c-8.3456 0.068267-18.8416 1.1776-30.3104 3.293866a211.677867 211.677867 0 0 0-61.969067 21.504c-61.269333 32.989867-94.685867 92.330667-94.685867 172.151467v9.028267c-0.034133 7.594667 0.341333 17.544533 1.143467 28.3648 1.501867 20.0704 4.232533 39.133867 8.277333 56.746666 7.901867 34.5088 20.2752 61.320533 38.6048 80.4352 2.167467 2.2528 5.461333 6.4512 8.465067 11.025067 3.84 5.853867 5.973333 10.752 6.314667 13.090133-0.068267 7.8848-3.925333 11.264-47.496534 32.785067-132.317867 65.28-176.349867 102.007467-176.7936 164.488533l-4.164266 59.562667a43.537067 43.537067 0 0 0 40.260266 46.557867c12.612267 0.887467 627.1488 1.024 637.781334-0.170667a43.554133 43.554133 0 0 0 38.4-48.042667l-6.4512-59.562666c-1.194667-61.474133-45.602133-98.116267-176.7424-162.833067z m151.1936 165.4272l25.565867-1.3824-0.1024-1.962667-25.565867 1.3824-18.107733 1.962667h18.210133z m-25.565867 0.785067l5.802667 53.486933c-67.157333 0.597333-545.621333 0.512-613.034667-0.0512l3.669334-52.445867c0.068267-36.6592 33.314133-64.546133 148.309333-121.2928 60.416-29.815467 76.049067-44.322133 76.049067-78.933333 0-2.048-0.136533-4.096-0.4096-6.178133-1.416533-11.127467-6.485333-22.869333-14.267734-34.730667a133.888 133.888 0 0 0-14.336-18.397867c-11.025067-11.485867-19.643733-30.208-25.668266-56.439466a330.769067 330.769067 0 0 1-7.1168-49.1008 326.3488 326.3488 0 0 1-1.006934-24.456534v-9.147733c0-61.474133 23.552-103.253333 67.754667-127.061333a160.648533 160.648533 0 0 1 47.035733-16.247467c8.6528-1.604267 16.213333-2.389333 21.1968-2.440533h8.891734c4.608 0.034133 12.202667 0.853333 20.821333 2.440533 16.861867 3.1232 32.699733 8.533333 47.035733 16.247467 44.202667 23.808 67.754667 65.5872 67.754667 127.061333v9.233067c0.034133 6.229333-0.290133 14.848-1.006933 24.354133-1.314133 17.595733-3.669333 34.133333-7.1168 49.117867-6.024533 26.231467-14.6432 44.9536-25.668267 56.439466a133.870933 133.870933 0 0 0-14.336 18.397867c-7.765333 11.861333-12.8512 23.6032-14.267733 34.730667a48.5888 48.5888 0 0 0-0.4096 6.178133c0 34.6112 15.633067 49.117867 76.049066 78.933333 115.012267 56.763733 148.241067 84.650667 148.241067 119.517867h7.389867l-7.338667 0.785067z").fill('#FFFF00').attr({ x: 20, y: 60 }).transform({scale:0.030}).transform({'x':x,'y':y}).animate().animate({ ease: '<', delay: '0.1s' }).attr({ fill: '#f03' }).loop()
	    }
	}

	// street L 上面 R 下面 
	function draw_lmd(nums,street='L',name,alarm)
	{
		var group  = draw.group().attr("id",name);
	    vpj = topY 
	    vpi = nums 
	 
	    x = (vpi-1) * lineWidth + 20
	    //console.log("x=",x)
	   
	    if(street=='L')
	    {
	    	 y = topYN - 90   
	    }
	    else
	    { 
	    	 y = topYN + 160   
	    }
	    if(alarm == '1'){
	    	group.path("M138.8,64.5l-7-4.4L121.7,57l-1-11.1-10.8-2.5H99L95.3,49,67.6,40.5l-3.1-.9h0l-6.6,7-6.6,87,7.6-6,3.7-61.4,7.6-3.5,2.6,58.2,5-2.7-3-55,2.9,1.3L83,67l13.8,6.4v5c-.4.1-.6-.1-1,0-2,.6-2.2,8.2-.2,8.9.7.2,1.4-.5,2,0,.2.1.2.3.7,2.3.3.9.3,1,.4,1.2a2.47,2.47,0,0,1,.4.9c.2.6.1.7,0,.8a.31.31,0,0,1-.2.1,2,2,0,0,1-.5-.1,1.13,1.13,0,0,1-.6-.6l-1.3.2c.1.2.1.4.2.6a2,2,0,0,0,.7,1,2.47,2.47,0,0,0,2.8-.3,2.62,2.62,0,0,0,.2-2.3l-.2-.6c-.1-.2-.1-.4-.2-.5s-.1-.2-.1-.3a.44.44,0,0,1-.1-.3c0-.2,0-1.6.8-2.1.6-.4,1,.2,1.6,0,1.9-.6,2.2-8.2.2-8.9-.4-.1-.6.1-.9,0V75.5l24.1,11.2,1.5.7-5.7,66.2,5.7-3.4L132,92.9l6.1-3.2,7.5,50.3,3.8-3.7ZM76,52.8l-.7-2.4,1.6.5Zm26.9,5.6-2.7,6.5-4-8.4ZM78.2,56.7,80,53l3.4,6Zm9.5,2.5L84.2,53,90,54.7Zm2.6,3,2.4-4.8L96.3,65S90.2,62.2,90.3,62.2Zm10.6,16.2H97.2V73.6l3.7,1.7Zm2-10.4,2.5-6,3.4,8.8Zm5.7-7.9,7.8,2.3-3.7,8.3Zm6.7,13.8,3.5-7.8,3.7,11.1Zm10.6,1.9-4-11.8,7.4,2.1Z").fill('#FFFF00').transform({scale:0.6}).transform({'x':x,'y':y})
	    }
	    else
	    {
	    	group.path("M138.8,64.5l-7-4.4L121.7,57l-1-11.1-10.8-2.5H99L95.3,49,67.6,40.5l-3.1-.9h0l-6.6,7-6.6,87,7.6-6,3.7-61.4,7.6-3.5,2.6,58.2,5-2.7-3-55,2.9,1.3L83,67l13.8,6.4v5c-.4.1-.6-.1-1,0-2,.6-2.2,8.2-.2,8.9.7.2,1.4-.5,2,0,.2.1.2.3.7,2.3.3.9.3,1,.4,1.2a2.47,2.47,0,0,1,.4.9c.2.6.1.7,0,.8a.31.31,0,0,1-.2.1,2,2,0,0,1-.5-.1,1.13,1.13,0,0,1-.6-.6l-1.3.2c.1.2.1.4.2.6a2,2,0,0,0,.7,1,2.47,2.47,0,0,0,2.8-.3,2.62,2.62,0,0,0,.2-2.3l-.2-.6c-.1-.2-.1-.4-.2-.5s-.1-.2-.1-.3a.44.44,0,0,1-.1-.3c0-.2,0-1.6.8-2.1.6-.4,1,.2,1.6,0,1.9-.6,2.2-8.2.2-8.9-.4-.1-.6.1-.9,0V75.5l24.1,11.2,1.5.7-5.7,66.2,5.7-3.4L132,92.9l6.1-3.2,7.5,50.3,3.8-3.7ZM76,52.8l-.7-2.4,1.6.5Zm26.9,5.6-2.7,6.5-4-8.4ZM78.2,56.7,80,53l3.4,6Zm9.5,2.5L84.2,53,90,54.7Zm2.6,3,2.4-4.8L96.3,65S90.2,62.2,90.3,62.2Zm10.6,16.2H97.2V73.6l3.7,1.7Zm2-10.4,2.5-6,3.4,8.8Zm5.7-7.9,7.8,2.3-3.7,8.3Zm6.7,13.8,3.5-7.8,3.7,11.1Zm10.6,1.9-4-11.8,7.4,2.1Z").fill('#FFFF00').transform({scale:0.6}).transform({'x':x,'y':y}).animate({ ease: '<', delay: '0.1s' }).attr({ fill: '#f03' }).loop()
	    }
	    group.text(name).font({size:15}).fill('#fff').move(x+20, y-5)
	}

	 // street L 上面 R 下面  direction 1 东-》西  2 西--》东  报警
	 // prePos 前位置   pos 现在位置 
	function draw_car(nums,street ='L',direction,name,speed,alarm,pos)
	{
		var location_Name = ''
		var group  = draw.group().attr("id",name);
	    vpj = topY 
	    vpi = nums 
	    x = (vpi-1) * lineWidth - 185
	    x1 = (pos-1) * lineWidth - 185
	    if(street=='R')
	    {
	    	location_Name ='右DK'+ parseInt(nums/10+13)+'-'+ parseInt(nums%10)
	    	y = topYN + 175
	    	if(direction== 1)
	    	{
	    		scaleY = 1
	    	}
	    	else
	    	{ 
	    		scaleY = -1
	    	}	    	
	    }
	    else
	    {
	    	location_Name ='左DK'+ parseInt(nums/10+13)+'-'+ parseInt(nums%10)
	    	y = topYN  - 65
	    	if(direction==1)
	    	{
	    		scaleY = 1
	    	}
	    	else
	    	{
	    		scaleY = -1
	    	}
	    }	 
	    if(alarm == '1'){
	    	group.path("M415.8,60.6l-28-15.3c-9.8-5.4-20.3-8.1-30.8-7.9h-4.3v-5.3l73.1-17.3L346.8,0l0,8.6H298v7.7v9h48.7l0,12.3H208H68.8c-10.5-0.1-21,2.5-30.8,7.9L10,60.6C1.9,65-2.1,77.7,1,89.2c2.3,8.5,8.1,14.1,14.6,14.1h16.7c1.2,0,2.1-1.3,2.1-3c0-7.1,1.2-4,2.7-4.2c-0.2,1.1-0.3,2.3-0.3,3.4c0,7.6,4.4,13.7,9.8,13.7c3,0,5.8-2,7.7-5.2c3.3,5.9,9.5,7.1,13.7,2.3c2.3-2.5,3.7-6.6,3.7-10.7c0-1.1-0.1-2.3-0.3-3.4c1.5,0.3,2.6,2.1,2.7,4.2c0,1.7,0.9,3,2.1,3H186c1.2,0,2.1-1.3,2.1-3c0-2.1,1.2-4,2.7-4.2c-0.2,1.1-0.3,2.3-0.3,3.4c0,7.6,4.4,13.9,9.8,13.7c3,0,5.8-2,7.6-5.2c3.3,5.9,9.5,7.1,13.7,2.3c3-3.4,4.4-8.9,3.4-14.3c1.5,0.3,2.6,2.1,2.6,4.2c0,1.7,0.9,3,2.1,3l119.9,0.1c1.2,0,2.1-1.3,2.1-3c0-2.1,1.2-4,2.7-4.2c-1.3,7.4,1.8,14.8,7,16.8c3.8,1.4,7.7-0.6,10.1-4.8c3.3,5.9,9.5,7.1,13.7,2.4c3-3.4,4.4-9,3.4-14.3c1.5,0.3,2.7,2.1,2.7,4.2c0,1.7,0.9,3,2.1,3h16.7c8.6,0,15.6-9.9,15.6-22.2C425.8,72.1,421.8,63.9,415.8,60.6z M393.6,55l16.4,8.9h-33.4c-5.9,0-11.6-2.4-16.5-7.1c-0.3-0.3-0.4-1-0.2-1.4c0.1-0.3,0.3-0.4,0.6-0.4H393.6zM32.2,55h33.1c0.3,0,0.6,0.3,0.7,0.7s0,0.8-0.3,1.1c-4.9,4.7-10.6,7.1-16.5,7.1H15.8L32.2,55z M46.6,107.4c-3.1,0-5.6-3.5-5.6-7.8c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C52.1,103.9,49.6,107.4,46.6,107.4z M64.4,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.8c0-1.3,0.2-2.4,0.6-3.5h10C68.3,99.9,67.2,104.6,64.4,106.6z M202.7,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.9c0-1.1,0.2-2.4,0.6-3.4h10C206.6,99.9,205.4,104.7,202.7,106.6z M215.6,107.4c-3.1,0-5.6-3.5-5.6-7.9c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C221.2,103.9,218.7,107.4,215.6,107.4z M363.9,107.4c-3.1,0-5.6-3.5-5.6-7.9c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C369.5,103.9,367,107.4,363.9,107.4z M381.7,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.9c0-1.1,0.2-2.4,0.6-3.4h10C385.6,99.9,384.4,104.7,381.7,106.6z M418.3,92.6c-2.1,3.1-5.1,4.8-8.1,4.8h-14.9c-0.9-4.4-3.7-7.4-6.9-7.4h-33.5c-3.2,0-6,3-6.9,7.4l-116.4,0.1c-0.9-4.4-3.7-7.4-6.9-7.4h-15.1V71.8h2.9h1H327c2.5,0,4.5-2.8,4.5-6.4v-11c0-3.5-2-6.4-4.5-6.4H90.5C88,48,86,50.8,86,54.4v11c0,3.5,2,6.4,4.5,6.4h116.3v18.4h-15.6c-3.2,0-6,3-6.9,7.4H78c-0.9-4.4-3.8-7.4-7-7.4H37.5c-3.2,0-6,3-6.9,7.4h-15c-6.3,0-11.4-7.2-11.4-16.1c0-4.4,1.2-8.5,3.4-11.5h41.6c6.7,0,13.2-2.8,18.8-8.1c2.3-2.1,2.9-6.4,1.4-9.6c-0.9-2-2.5-3.1-4.1-3.1H43.4c8.2-3.8,16.8-5.8,25.4-5.8h143.6l1.2-0.1H357c8.6,0,17.2,2,25.4,5.8h-21.9c-2.7,0-4.9,3.1-4.9,6.9c0,2.3,0.8,4.5,2.2,5.8c5.6,5.2,12.1,8.1,18.8,8.1h41.6C422.7,76.1,422.7,86.2,418.3,92.6z M90.5,69c-1.4,0-2.5-1.6-2.5-3.5v-11c0-2,1.1-3.5,2.5-3.5H327c1.4,0,2.5,1.6,2.5,3.5v11c0,2-1.1,3.5-2.5,3.5H90.5z").fill('#FFFF00').transform({'x':x,'y':y}).scale(scaleY, 1).transform({scale:0.20})
	    }
	    else
	    {
	    	group.path("M415.8,60.6l-28-15.3c-9.8-5.4-20.3-8.1-30.8-7.9h-4.3v-5.3l73.1-17.3L346.8,0l0,8.6H298v7.7v9h48.7l0,12.3H208H68.8c-10.5-0.1-21,2.5-30.8,7.9L10,60.6C1.9,65-2.1,77.7,1,89.2c2.3,8.5,8.1,14.1,14.6,14.1h16.7c1.2,0,2.1-1.3,2.1-3c0-7.1,1.2-4,2.7-4.2c-0.2,1.1-0.3,2.3-0.3,3.4c0,7.6,4.4,13.7,9.8,13.7c3,0,5.8-2,7.7-5.2c3.3,5.9,9.5,7.1,13.7,2.3c2.3-2.5,3.7-6.6,3.7-10.7c0-1.1-0.1-2.3-0.3-3.4c1.5,0.3,2.6,2.1,2.7,4.2c0,1.7,0.9,3,2.1,3H186c1.2,0,2.1-1.3,2.1-3c0-2.1,1.2-4,2.7-4.2c-0.2,1.1-0.3,2.3-0.3,3.4c0,7.6,4.4,13.9,9.8,13.7c3,0,5.8-2,7.6-5.2c3.3,5.9,9.5,7.1,13.7,2.3c3-3.4,4.4-8.9,3.4-14.3c1.5,0.3,2.6,2.1,2.6,4.2c0,1.7,0.9,3,2.1,3l119.9,0.1c1.2,0,2.1-1.3,2.1-3c0-2.1,1.2-4,2.7-4.2c-1.3,7.4,1.8,14.8,7,16.8c3.8,1.4,7.7-0.6,10.1-4.8c3.3,5.9,9.5,7.1,13.7,2.4c3-3.4,4.4-9,3.4-14.3c1.5,0.3,2.7,2.1,2.7,4.2c0,1.7,0.9,3,2.1,3h16.7c8.6,0,15.6-9.9,15.6-22.2C425.8,72.1,421.8,63.9,415.8,60.6z M393.6,55l16.4,8.9h-33.4c-5.9,0-11.6-2.4-16.5-7.1c-0.3-0.3-0.4-1-0.2-1.4c0.1-0.3,0.3-0.4,0.6-0.4H393.6zM32.2,55h33.1c0.3,0,0.6,0.3,0.7,0.7s0,0.8-0.3,1.1c-4.9,4.7-10.6,7.1-16.5,7.1H15.8L32.2,55z M46.6,107.4c-3.1,0-5.6-3.5-5.6-7.8c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C52.1,103.9,49.6,107.4,46.6,107.4z M64.4,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.8c0-1.3,0.2-2.4,0.6-3.5h10C68.3,99.9,67.2,104.6,64.4,106.6z M202.7,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.9c0-1.1,0.2-2.4,0.6-3.4h10C206.6,99.9,205.4,104.7,202.7,106.6z M215.6,107.4c-3.1,0-5.6-3.5-5.6-7.9c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C221.2,103.9,218.7,107.4,215.6,107.4z M363.9,107.4c-3.1,0-5.6-3.5-5.6-7.9c0-1.3,0.2-2.4,0.6-3.5h10c0.4,1.1,0.6,2.3,0.6,3.5C369.5,103.9,367,107.4,363.9,107.4z M381.7,106.6c-0.8,0.6-1.6,0.8-2.4,0.8c-3.1,0-5.6-3.5-5.6-7.9c0-1.1,0.2-2.4,0.6-3.4h10C385.6,99.9,384.4,104.7,381.7,106.6z M418.3,92.6c-2.1,3.1-5.1,4.8-8.1,4.8h-14.9c-0.9-4.4-3.7-7.4-6.9-7.4h-33.5c-3.2,0-6,3-6.9,7.4l-116.4,0.1c-0.9-4.4-3.7-7.4-6.9-7.4h-15.1V71.8h2.9h1H327c2.5,0,4.5-2.8,4.5-6.4v-11c0-3.5-2-6.4-4.5-6.4H90.5C88,48,86,50.8,86,54.4v11c0,3.5,2,6.4,4.5,6.4h116.3v18.4h-15.6c-3.2,0-6,3-6.9,7.4H78c-0.9-4.4-3.8-7.4-7-7.4H37.5c-3.2,0-6,3-6.9,7.4h-15c-6.3,0-11.4-7.2-11.4-16.1c0-4.4,1.2-8.5,3.4-11.5h41.6c6.7,0,13.2-2.8,18.8-8.1c2.3-2.1,2.9-6.4,1.4-9.6c-0.9-2-2.5-3.1-4.1-3.1H43.4c8.2-3.8,16.8-5.8,25.4-5.8h143.6l1.2-0.1H357c8.6,0,17.2,2,25.4,5.8h-21.9c-2.7,0-4.9,3.1-4.9,6.9c0,2.3,0.8,4.5,2.2,5.8c5.6,5.2,12.1,8.1,18.8,8.1h41.6C422.7,76.1,422.7,86.2,418.3,92.6z M90.5,69c-1.4,0-2.5-1.6-2.5-3.5v-11c0-2,1.1-3.5,2.5-3.5H327c1.4,0,2.5,1.6,2.5,3.5v11c0,2-1.1,3.5-2.5,3.5H90.5z").fill('#FFFF00').transform({'x':x,'y':y}).scale(scaleY, 1).transform({scale:0.20}).animate({ ease: '<', delay: '0.1s' }).attr({ fill: '#f03' }).loop()
	    }
		
	    if(direction=='1')
	    {
	    	group.text(location_Name).font({size:15}).fill('#fff').move(x+185, y) 
	    	group.text(name +'('+ speed+'公里/小时)').font({size:15}).fill('#fff').move(x+165, y+20)
	    }
 		else
	    {
 			group.text(location_Name).font({size:15}).fill('#fff').move(x+185, y) 
	    	group.text(name+'('+ speed+'公里/小时)').font({size:15}).fill('#fff').move(x+165, y+20)
	    }
	    console.log('begin animation begining x='+x+ 'x1= '+x1)
	    //group.animate(3000).attr('x', x1)
	    group.animate({ ease: '<', delay: '1s' }).move(x1-x, 0)
	    console.log('begin animation end')
		//.transform({ rotation: 180 , relative: true })

	}

	drawStation(spaceHight,topY_chenzhan)
	
    //transform="translate(50,50) scale(0.015)"

    function drawStationLine(topYN,lineName)
    {

    	var lineTop = draw.line(topX-100,topYN,width+100,topYN)
   		lineTop.stroke({ width: 5, color: '#fff'})

   		for(var i =0 ;i <= 18 ;i++)
		{
			for(var j =0 ;j < 10 ;j++)
			{
			   var lineh = draw.line(spaceHight*10*i+j*spaceHight,topYN,spaceHight*10*i+j*spaceHight,topYN+10)
	           lineh.stroke({ width: 1, color: '#fff'})

	           if(j!=9){
	           	 	draw.text(( j + 1).toString()).font({size:15}).fill('#fff').move(spaceHight*10*i+(j+1)*spaceHight-3, topYN + 20);
	           }
	           else
	           {
	           		draw.text(lineName + (i+14)).font({size:15}).fill('#fff').move(spaceHight*10*i+(j+1)*spaceHight-15, topYN + 8);
	           }
			}
		}
    }
    


    
    function drawPd(topY_line_sec){
    	var lineSec = draw.line(topX-100,topY_line_sec,width+100,topY_line_sec)
    	lineSec.stroke({ width: 1, color: '#fff'})

    	var lineThird = draw.line(topX-100,topY_line_sec+50,width+100,topY_line_sec+50)
    	lineThird.stroke({ width: 1, color: '#fff'})
    	var dataDown=new Array(214,217.067,220,285,200.051,200,590,210,200,210,598.001,200,220,260,310,260,200,230,280,240,230,903.443,290,200,350,260,225.939,250,200,400.05,240,200,300,200,210,590,219.08,250,540,215,350,355,280,230,860,230,280,200,280,640,420,233,557,372.509,200,200,635)

    	var dataUp = new Array(8,12.342,2,18,5.209,4,2,5,5.37,2,4.512,20,2,28,5.774,2,10,18.643,28,2,28,6.238,5,20,2,5,21.156,2,28,18.998,2,22,5.1,4,22,2,8.992,2,6,5.116,6,2,22,6,4.07,20,2,20,4,11.031,4,2,6,5.17,28,28,2)

    	var dirction = new Array("下","上","下","下","下","上","下","上","下","下","上","上","下","下","上","下","上","上","上","上","下","下","上","上","下","上","上","下","下","上","下","下","下","上","上","下","上","上","下","上","上","下","下","下","上","上","下","下","下","上","下","下","上","下","下","上","下")

    	var dataDown_x = 59.86/2;
    	for(var i= 0 ;i<dataUp.length; i++)
    	{
    		dataDown_x = dataDown_x + dataDown[i]/2;
    		var line = draw.line(dataDown_x,topY_line_sec,dataDown_x,topY_line_sec+50)
     		line.stroke({ width: 1, color: '#fff'})
    	}

    	var dataDown_x = 59.86/2;
    	for(var i= 0 ;i<dataUp.length; i++)
    	{    	
    		dataDown_next = dataDown_x + dataDown[i]/2
    	
     		if(dirction[i]=='下')
     		{
     			line = draw.line(dataDown_x,topY_line_sec,dataDown_next,topY_line_sec+50)
     			line.stroke({ width: 1, color: '#fff'})

     			draw.text(dataUp[i].toString()).font({size:10}).fill('#fff').move(dataDown_x + dataDown[i]/2 -30, topY_line_sec + 15);

     			draw.text(dataDown[i].toString()).font({size:10}).fill('#fff').move(dataDown_x + 20, topY_line_sec + 30);
     		}
     		else
     		{
				line = draw.line(dataDown_x,topY_line_sec+50,dataDown_next,topY_line_sec)
     			line.stroke({ width: 1, color: '#fff'})

     			draw.text(dataUp[i].toString()).font({size:10}).fill('#fff').move(dataDown_x + 20, topY_line_sec + 15);

     			draw.text(dataDown[i].toString()).font({size:10}).fill('#fff').move(dataDown_x + dataDown[i]/2 -40, topY_line_sec + 30);

     		}
     		dataDown_x = dataDown_next
    	}
    }
    
    draw.text("左线").font({size:15}).fill('#fff').move(0, topYN-10);
    drawStationLine(topYN+10,"ZDK")
    drawPd(topY_line_sec)

    
    draw.text("右线").font({size:15}).fill('#fff').move(0, topY -20)
    drawStationLine(topY,"YDK")
    var pd_sec_y = topY + 60
    drawPd(pd_sec_y)
    
    var dataLimit = [{"beginpoint":13300,"endpoint":13800,"linename":'R',"type":1,"memo":"禁止通过"},{"beginpoint":18000,"endpoint":18500,"linename":'R',"type":1,"memo":"禁止通过"},{"beginpoint":22000,"endpoint":23000,"linename":'R',"type":1,"memo":"禁止通过"},{"beginpoint":13300,"endpoint":13800,"linename":'L',"type":0,"memo":"限速10米/秒"},{"beginpoint":18000,"endpoint":18500,"linename":'L',"type":0,"memo":"限速10米/秒"},{"beginpoint":22000,"endpoint":23000,"linename":'L',"type":0,"memo":"限速10米/秒"}];
	  
  	$.ajax({
    		type: "GET",
    	    url: '/ZT/base/limitspeed/qlist?page=1&limit=100',
            contentType: "application/json",
    	    data: '',
    	    success: function(r){
    	    	dataLimit = r.limitspeedList
    	    	addLimitLine(topYN)
    		}
    	});
    

	
  	    
   
   // draw_car(1,0,0)
   // draw_lmd(6,'R','一班',2)
   // draw_people(6,'R','一班',2)
   // draw_car(8,0,1)

   // draw_car(1,1,0)
   // draw_lmd(3,1)
   // draw_pple(6,1)
   // draw_car(8,'L',0,0,'10')
   // draw_car(8,'R',1,1,'10')

    
    function setcarlist(carlist)
     {
    	$("#msg_sl").empty();
 		$("#msg_sl").append('<option value="全部" selected>全部</option>');
    
 		//console.log(carlist)
    	for(var i in carlist){  
	   		if(carlist[i].type=='车辆')
	   		{
	   			$("#msg_sl").append('<option>' + carlist[i].readerName + '</option>');
	   		}
   		}
     }
  
    
    function getRealTimeinfo(){
    	console.log("getRealTimeinfo")
    	$.ajax({
    		type: "GET",
    	    url: '/ZT/base/realtime/qlist?page=1&limit=100',
            contentType: "application/json",
    	    data: '',
    	    success: function(r){
    	    	console.log(r.realtimelist);
    	    	var carlist = r.realtimelist
    	    	setcarlist(carlist)
    	    	for(var i in r.realtimelist){ 
    	    		$("#"+r.realtimelist[i].readerName).remove()
    	    		console.log("清除"+r.realtimelist[i].readerName )
    	    		// onload 第一次执行的时候不要报警
    	    		if(r.realtimelist[i].status=='2' && audioTimes==1)
	    			{
    	    			play_alarm()
    	    			//control()
	    			}
    	    	
    	    		console.log('audioTimes='+audioTimes)
    	    		if(r.realtimelist[i].type=='车辆')
    	    		{
    	    			//位置  左线|右线  方向  名称  报警
    	    			draw_car(r.realtimelist[i].prePos,r.realtimelist[i].axial,r.realtimelist[i].direction,r.realtimelist[i].readerName,r.realtimelist[i].speen,r.realtimelist[i].status,r.realtimelist[i].pos)
    	    			now_status = isLimited(r.realtimelist[i].pos,r.realtimelist[i].axial)
    	    			if(1==now_status  && audioTimes==1)
    	    			{
    	    				console.log(r.realtimelist[i].readerName+' permit limited')
    	    				play_permit()
    	    			}
    	    			else if(2==now_status  && audioTimes==1)
    	    			{
    	    				console.log(r.realtimelist[i].readerName+' speed limited')
    	    				play_limited()
    	    			}
    	    		}
    	    		
    	    		if(r.realtimelist[i].type=='龙门吊')
    	    		{
    	    			//位置  左线|右线 名称 报警
    	    			draw_lmd(r.realtimelist[i].pos,r.realtimelist[i].axial,r.realtimelist[i].readerName,r.realtimelist[i].status)
    	    			//draw_people(r.realtimelist[i].pos,r.realtimelist[i].axial,r.realtimelist[i].readerName)
        	    	} 
    	    		if(r.realtimelist[i].type=='班组')
    	    		{
    	    			//位置  左线|右线  名称 报警
    	    			draw_people(r.realtimelist[i].pos,r.realtimelist[i].axial,r.realtimelist[i].readerName,r.realtimelist[i].status)
    	    		} 
			    }
    	    	audioTimes=1
    		}
    	
    	});
    	
   }
 
 
   function addLimitLine(topYN)
   {	    
	    for(var i in dataLimit){ 
	    		var limitb = ((dataLimit[i].beginpoint - 13000) / 100) * 50
	    		var limite = ((dataLimit[i].endpoint - 13000) / 100) * 50
	    		
	    		
	    		if(dataLimit[i].linename=='L')
	    		{
	    			var lineTop = draw.line(limitb,topYN+10,limite,topYN+10)
	    			if(dataLimit[i].type==1){
	    				lineTop.stroke({ width: 3, color: 'red'})
	    				draw.text(dataLimit[i].memo).font({size:10}).fill('red').move(limitb,topYN - 15);
	    			}
	    			else
	    			{
	    				//console.log(i)
	    				lineTop.stroke({ width: 3, color: 'yellow'})
	    				draw.text(dataLimit[i].memo).font({size:10}).fill('yellow').move(limitb,topYN - 15);
	    			}	    			
	    		}
	    		else
	    		{
	    			var lineTop = draw.line(limitb,topYN+ trailHight,limite,topYN + trailHight)
	    			if(dataLimit[i].type==1){
	    				lineTop.stroke({ width: 3, color: 'red'})
	    				draw.text(dataLimit[i].memo).font({size:10}).fill('red').move(limitb,topYN+ trailHight - 25);
	    			}
	    			else
	    			{
	    				lineTop.stroke({ width: 3, color: 'yellow'})
	    				draw.text(dataLimit[i].memo).font({size:10}).fill('yellow').move(limitb,topYN+ trailHight - 25);
	    			}
	    		}
	    }
   }
   
   // 2  speed is in limited
   // 1  not permited
   function isLimited(pos,linename)
   {
	   //console.log('isLimited is running ')
	   //console.log(dataLimit)
	   for(var i in dataLimit){ 
		   if(dataLimit[i].linename==linename && (dataLimit[i].beginpoint <= (parseInt(pos)+130) * 100) && (dataLimit[i].endpoint >= (parseInt(pos)+130) * 100))
   			{
			   //console.log(linename)
			   //console.log(dataLimit[i].beginpoint)
			   //console.log(dataLimit[i].endpoint)
			   //console.log(pos)
			   if(dataLimit[i].type==1){
				   return 1
			   }
			   else{
				   return 2
			   }
   			}
	   }
	   return 0
   }
   function drawStation(spaceHight,topY_chenzhan)
   {
	   draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*0+6*spaceHight-50,10);
	    draw.text("同福西").font({size:15}).fill('#fff').move(spaceHight*10*0+6*spaceHight-30, topY_chenzhan );
	    draw.text("DK13+607").font({size:15}).fill('#f00').move(spaceHight*10*0+6*spaceHight-55, topY_chenzhan + 20);

		draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*1+5*spaceHight-55,10);
	    draw.text("文化公园").font({size:15}).fill('#fff').move(spaceHight*10*1+5*spaceHight-40, topY_chenzhan );
	    draw.text("DK14+491.327").font({size:15}).fill('#f00').move(spaceHight*10*1+5*spaceHight-55, topY_chenzhan + 20);
	    
	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*2+5*spaceHight-55,10);
	    draw.text("华林寺").font({size:15}).fill('#fff').move(spaceHight*10*2+5*spaceHight-30, topY_chenzhan );
	    draw.text("DK15+515").font({size:15}).fill('#f00').move(spaceHight*10*2+5*spaceHight-55, topY_chenzhan + 20);


	  	draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*3+5*spaceHight-55,10);
	  	draw.text("陈家祠").font({size:15}).fill('#fff').move(spaceHight*10*3+5*spaceHight-30, topY_chenzhan );
	    draw.text("DK16+519").font({size:15}).fill('#f00').move(spaceHight*10*3+5*spaceHight-55, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*4+3*spaceHight-30,10);
	    draw.text("彩虹桥").font({size:15}).fill('#fff').move(spaceHight*10*4+3*spaceHight-10, topY_chenzhan );
	    draw.text("DK17+329").font({size:15}).fill('#f00').move(spaceHight*10*4+3*spaceHight-35, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*5+2*spaceHight,10);
	    draw.text("西村").font({size:15}).fill('#fff').move(spaceHight*10*5+2*spaceHight+20, topY_chenzhan );
	    draw.text("DK18+287").font({size:15}).fill('#f00').move(spaceHight*10*5+2*spaceHight+5, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*7+2*spaceHight-80,10);
	    draw.text("鹅掌坦").font({size:15}).fill('#fff').move(spaceHight*10*7+2*spaceHight-60, topY_chenzhan );
	    draw.text("DK20+150").font({size:15}).fill('#f00').move(spaceHight*10*7+2*spaceHight-85, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*7+9*spaceHight-0,10);
	    draw.text("同德").font({size:15}).fill('#fff').move(spaceHight*10*7+9*spaceHight+20, topY_chenzhan );
	    draw.text("DK20+990").font({size:15}).fill('#f00').move(spaceHight*10*7+9*spaceHight+5, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*8+8*spaceHight-35,10);
	    draw.text("上步").font({size:15}).fill('#fff').move(spaceHight*10*8+8*spaceHight-10, topY_chenzhan );
	    draw.text("DK21+835").font({size:15}).fill('#f00').move(spaceHight*10*8+8*spaceHight-35, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*9+9*spaceHight-5,10);
	    draw.text("聚龙").font({size:15}).fill('#fff').move(spaceHight*10*9+9*spaceHight+20, topY_chenzhan );
	    draw.text("DK22+975").font({size:15}).fill('#f00').move(spaceHight*10*9+9*spaceHight-5, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*10+7*spaceHight-5,10);
	    draw.text("石潭").font({size:15}).fill('#fff').move(spaceHight*10*10+7*spaceHight+20, topY_chenzhan );
	    draw.text("DK23+760").font({size:15}).fill('#f00').move(spaceHight*10*10+7*spaceHight-5, topY_chenzhan + 20);

		draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*12+1*spaceHight-25,10);
		draw.text("小坪").font({size:15}).fill('#fff').move(spaceHight*10*12+1*spaceHight-10, topY_chenzhan );
	    draw.text("DK25+120").font({size:15}).fill('#f00').move(spaceHight*10*12+1*spaceHight-25, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*14+1*spaceHight-35,10);
	    draw.text("石井").font({size:15}).fill('#fff').move(spaceHight*10*14+1*spaceHight-20, topY_chenzhan );
	    draw.text("DK27+110").font({size:15}).fill('#f00').move(spaceHight*10*14+1*spaceHight-35, topY_chenzhan + 20);

	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*15+9*spaceHight-35,10);
	    draw.text("亭岗").font({size:15}).fill('#fff').move(spaceHight*10*15+9*spaceHight-20, topY_chenzhan );
	    draw.text("DK28+940").font({size:15}).fill('#f00').move(spaceHight*10*15+9*spaceHight-35, topY_chenzhan + 20);

	    
	    draw.path("M20 20 L100 20 L100 30 L20 30 L20 20 M60 10 L60 40").stroke({ width:1, color: 'blue'}).move(spaceHight*10*17+6*spaceHight-75,10);
	    draw.text("滘心").font({size:15}).fill('#fff').move(spaceHight*10*17+6*spaceHight-50, topY_chenzhan );
	    draw.text("DK30+570").font({size:15}).fill('#f00').move(spaceHight*10*17+6*spaceHight-75, topY_chenzhan + 20);
   }
   
   function getMsginfo(){  //base:tdmsg:qlist
	   	$.ajax({
	   		type: "GET",
	   	    url: '/ZT/base/tdmsg/qlist?page=1&limit=100',
	           contentType: "application/json",
	   	    data: '',
	   	    success: function(r){
	   	    	//console.log(r.tdMsgList);
	   	    	var msg = "";
	   	    	for(var i in r.tdMsgList){  
	   	    		//console.log(r.tdMsgList[i].sender);
	   	    		msg = msg +r.tdMsgList[i].createtime+":"+r.tdMsgList[i].sender
	   	    		+"发送了消息给"+r.tdMsgList[i].receiver+":"+r.tdMsgList[i].msg+"\n"
	   	    		//console.log(msg);
	   	    	}
	   	    	$("#msg_device").val(msg);
	   		}
	   	});
	  }
	   
   function saveMsg () {
		var url =  "/ZT/base/tdmsg/save";
		var receiver= $("#msg_sl").val();
		var msg= $("#msg").val();
		//console.log("receiver="+receiver)
		//console.log("msg="+msg)
		
		$.ajax({
			type: "POST",
		    url: url,
            contentType: "application/json",
		    data: JSON.stringify({"id": "", sender: "控制台", "receiver":receiver , "msg": msg, "createtime": "2019-06-20 16:59:15"}),
		    success: function(r){
		    	if(r.code === 0){
					console.log("成功")
					
				}else{
					console.log("失败")
					
				}
		    	getMsginfo()
			}
		});
	}
     
	getMsginfo()
	 
    
    
    //
   
	// getRealTimeinfo()
	
	var div;
	function closeWin() {
	    var close = document.getElementById("close");
	    if (close.innerText == "×") {
	        close.innerText = "√";
	        div.style.bottom = "-300px"
	    } else {
	        close.innerText = "×";
	        div.style.bottom = "0px"
	    }
	}
	
	// function myrefresh() {
   //      window.location.reload();
    // }
	 
	 
	
	
	window.onload = function() {
	    div = document.getElementById("div");
	    div.style.bottom = "0px"
	    closeWin()
	   
	    getRealTimeinfo()
	    setInterval(getRealTimeinfo, 10*1000);
	   
	   
	}
]]>
  </script>
</svg>



<div id="div">
    <div id="close" onclick="closeWin()">×</div>
    <br>&nbsp;&nbsp;消息窗口<br>
    <form action="" name="">
    	&nbsp;&nbsp;<textarea id="msg_device" name="msg_device" cols="44" rows="18">
    		
    	</textarea>
    	&nbsp;&nbsp;设备<select id="msg_sl" name="msg_sl">
    		
    	</select>

    	<input type="text" id="msg" name="msg" ></input>
    	<input type="button" onclick= "saveMsg()" value="发送"></input>

    </form>

</div>


</body>
</html>